import React from 'react';
import { action } from 'mobx';
import { observer, useLocalStore } from 'mobx-react-lite';
import { Modal } from 'antd';
import * as listApi from '~/apis/dashboard/dashboardApi';

export const timestampToTime = (timestamp: any) => {
  const date = new Date(timestamp); // 时间戳为 10 位需 *1000，时间戳为 13 位的话不需乘 1000
  const Y = `${date.getFullYear()}/`;
  const M = `${
    date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
  }/`;
  const D = `${date.getDate()} `;
  const H = `${date.getHours()}:`;
  const m = `${date.getMinutes()}`;
  return Y + M + D + H + m;
};

export const ViewMessageModal = observer((props: any) => {
  const state = props.state;
  const replyModal = props.replyModal;
  const rowData = props.rowData;

  const localState = useLocalStore(() => ({
    getData: {} as any,
  }));

  const handleOk = action(() => {
    // init 回复弹窗
    replyModal.visible = true;
    replyModal.rowData = rowData;
  });

  const handleCancel = action(() => {
    state.visible = false;
  });

  React.useEffect(() => {
    listApi.getMessages(rowData.id).then((res: any) => {
      localState.getData = res.data;
    }).catch(() => {
      state.visible = false;
    });
  }, []);

  const { getData } = localState;

  return (
    <Modal
      title='Messages'
      visible={state.visible}
      onOk={handleOk}
      onCancel={handleCancel}
      cancelText='Close'
      okText='Reply'
      {...props}
    >
      <p style={{ fontSize: '20px' }}>
        {getData.subject}
      </p>
      <p className="mt-4 mb-4">
        <span>{timestampToTime(getData.createTime)}&nbsp; &nbsp; &nbsp; &nbsp;{getData.sendName}</span>
      </p>
      <p>
        {getData.content}
      </p>
    </Modal>
  );
});
